<template>
  <div class="page-search">
    <dsq-form :formItems="formItems" v-model="formData">
      <template #header>
        <h2>高级检索</h2>
      </template>
      <template #search>
        <el-button type="primary" @click="handleSearchClick">
          <el-icon style="vertical-align: middle">
            <search />
          </el-icon>
          搜索
        </el-button>
      </template>
      <template #remake>
        <el-button @click="resetSearchData">重置</el-button>
      </template>
    </dsq-form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { dsqForm } from '@/base-ui/form';
import { IFormType } from '@/base-ui/form/src/type';
/* 传入送给dsqForm的配置文件 */
const props = defineProps<{
  formItems: IFormType[];
}>();
/* 动态配置formData绑定的v-model */
let formItems = props.formItems ?? [];
const formOriginData: any = {};
for (const item of formItems) {
  formOriginData[item.field] = '';
}
/* 重置按钮的点击 */
const emits = defineEmits(['searchClick', 'resetClick']);
let formData = ref(formOriginData);
const resetSearchData = () => {
  formData.value = formOriginData;
  emits('resetClick');
};
const contentChange = (value: any) => {
  formData.value = { ...value };
};
/* 搜索按钮的点击 */

const handleSearchClick = () => {
  emits('searchClick', formData.value);
};
</script>

<style scoped>
.page-search {
  margin-bottom: 20px;
}
</style>
